<template>
  <el-container class="login-container">
    <el-header>
      <!-- <Cimage :src="loginHeader" /> -->
      <h4 class="title">楚楚街商城后台管理系统</h4>
    </el-header>
    <el-main class="flexCenter">
      <div class="login_box">
        <Cimage :src="loginHeader" fit="scale-down" width="100%" height="50px" class="mb20" />
        <LoginForm v-if="activeName === 'login'" :active-name.sync="activeName" />
        <RegisterForm v-else-if="activeName === 'register'" :active-name.sync="activeName" />
      </div>
    </el-main>
    <el-footer> 版权所有@2021 楚楚街 运营维护：楚楚街开发技术人员</el-footer>
  </el-container>
</template>

<script>
import loginHeader from '@/assets/images/loginHeader.png'
import logo from '@/assets/images/logo.png'
import LoginForm from './components/loginForm'
import RegisterForm from './components/registerForm'
export default {
  name: 'Login',
  components: { LoginForm, RegisterForm },
  data() {
    return {
      loginHeader: loginHeader,
      logo: logo,
      activeName: 'login' // 显示控制
    }
  },
  mounted() {
    this.$notify({
      title: '测试账号',
      dangerouslyUseHTMLString: true,
      position: 'bottom-right',
      message: '<p>账号：18899796648</p><p>密码：123456</p>',
      duration: 0
    })
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/element-variables.scss";
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: rgba($color: $--color-primary, $alpha: .1);
  overflow: hidden;
}
// 以下是自己写的css
.login-container{
  ::v-deep .el-header{
    background: rgba($color: $--color-primary, $alpha: .5);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep .el-footer{
    background: rgba($color: $--color-primary, $alpha: .5);
    display: flex;
    color: #fff;
    font-size: 14px;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-main{
    // padding-bottom: 150px;
    background: url(~@/assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
  }
  .title{
    font-size: 24px;
    color: #fff;
    letter-spacing: 2px;
  }
  .login_box{
    width: 520px;
    max-width: 100%;
    // background: #fff;
  }
}
</style>
